<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="出库记录" :autoBack="true" bgColor="#9dae8a" placeholder></u-navbar>
		<view v-if="list.length == 0" style="position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%);">
			<u-empty mode="order" iconColor="#9dae8a" textColor="#9dae8a" textSize="16" text="暂无出库记录"></u-empty>
		</view>
		<view v-else style="overflow: scroll;">
			<view v-for="item in list" :key="item.id" class="record-card" @click="onItemClick(item)">
				<view class="order-centent">
					<u-collapse :border="false">
						<u-collapse-item :title="item.name">
							<!-- <text slot="title" class="goods-params">商品名称：<text style="font-weight: bold;">{{item.name}}</text></text> -->
							<!-- <view slot="title" class="goods-params">商品名称：<text style="font-weight: bold;">{{item.name}}</text></view> -->
							<view class="goods-params">商品分类：<text >{{item.typeName}}</text></view>
							<view class="goods-params">商品价格：<text style="color: red;">￥{{item.price}}</text></view>
							<view class="order-table-content">
								<view class="order-table-title">
									<view class="order-table-title-item" style="width: 120rpx">尺码</view>
									<view class="order-table-title-item" style="width: 120rpx">颜色</view>
									<view class="order-table-title-item" style="width: 120rpx">数量</view>
								</view>
								<view class="order-table-main">
									<view v-for="(orderItem, index) in item.orderList" :key="index" class="order-table-main-item">
										<view class="order-table-main-item-cell" style="width: 120rpx">{{orderItem.size}}</view>
										<view class="order-table-main-item-cell" style="width: 120rpx">{{orderItem.color}}</view>
										<view class="order-table-main-item-cell" style="width: 120rpx">{{orderItem.count}}</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="record-card-info">
					<text class="info-text">出库人: {{ item.userName }}</text>
					<text class="info-text">{{ item.createTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getList();
		},
		data() {
			return {
				list: []
			};
		},
		methods: {
			onChangeOpen(item) {
				item.isOpen = !item.isOpen;
			},
			onItemClick(item) {
				// this.$toast.success(this,item.name)
			},
			async getList() {
				const res = await this.$api.goodsOutboundRecord.findAll({});
				if(res.code == 200) {
					this.list = res.data;
					this.list.forEach(item => {
						item.isOpen = false;
						item.orderList = JSON.parse(item.orderListJsonStr);
					})
				}else this.$toast.error(this,res.message);
				
				// this.list = [
				// 	{
				// 		isOpen: false,
				// 		id: '6846465468654',
				// 		typeName: '文胸专区',
				// 		name: '小精灵文胸',
				// 		price: '88',
				// 		time: '2023-06-29 09:56:23',
				// 		user: '初吻-31002',
				// 		userId: '2313216542132132132',
				// 		orderList: [
				// 			{
				// 				size: 'L',
				// 				color: '诱惑红',
				// 				count: 2
				// 			}
				// 		]
				// 	},
				// 	{
				// 		isOpen: false,
				// 		id: '6846465468654',
				// 		typeName: '内裤专区',
				// 		name: '蕾丝内裤',
				// 		price: '88',
				// 		time: '2023-06-29 09:46:23',
				// 		user: '初吻-31002',
				// 		userId: '2313216542132132132',
				// 		orderList: [
				// 			{
				// 				size: 'M',
				// 				color: '黑色',
				// 				count: 1
				// 			},
				// 			{
				// 				size: 'L',
				// 				color: '白色',
				// 				count: 2
				// 			}
				// 		]
				// 	},
				// ]
			}
		}
	}
</script>

<style lang="scss">
	// 折叠面板标题样式
	.u-cell__body {
		font-weight: bold;
		padding-left: 0 !important;
	}
	// 折叠面板内容区域样式
	.u-collapse-item__content__text {
		padding: 0 !important;
	}
	.record-card {
		margin: 16px;
		padding: 16px;
		background-color: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 12px 4px rgba(0,0,0,0.1);
		.record-card-title {
			font-weight: bold;
			font-size: 18px;
			height: 50px;
		}
		.record-card-info {
			// border-top: 1px solid gainsboro;
			padding-top: 8px;
			display: flex;
			justify-content: space-between;
			.info-text {
				color: darkgray;
				font-size: 14px;
			}
		}
	}
	
	.order-centent {
		.goods-params {
			padding: $spacing-small;
			padding-left: 0;
		}
		.order-table-content {
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			.order-table-title {
				display: flex;
				justify-content: space-around;
				// border-bottom: 1px solid gainsboro;
				.order-table-title-item {
					color: $green-bg-color;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					padding: $spacing-small;
				}
			}
			.order-table-main {
				.order-table-main-item {
					display: flex;
					justify-content: space-around;
					.order-table-main-item-cell {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: $spacing-small;
					}
				}
			}
		}
	}
</style>
